<template>
    <div class="app_footer">
        <div class="card">
            <img src="../assets/Mask-group.png" alt="" srcset="" class="cover_bg" />
            <img src="../assets/wt.png" alt="" srcset="" class="logo" />
            <div class="content">
                <div class="concat">{{ $t('home.mobile') }} : {{ dataInfo.linkMobile }}（同whatapp）</div>
                <div class="concat">{{ $t('home.time') }} : {{ dataInfo.wordDay }}</div>
                <div class="concat">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ $t('home.emial') }} : {{ dataInfo.email }}
                </div>
                <div class="follow">
                    {{ $t('home.follow') }}
                </div>
                <div class="icons">
                    <a :href="dataInfo.faceBookUrl" target="_blank">
                        <SvgIcon name="link2" />
                    </a>
                    <a :href="dataInfo.twitterUrl" target="_blank">
                        <SvgIcon name="ig" />
                    </a>
                </div>
            </div>
        </div>
        <div class="titles">
            <div>Terms & Conditions</div>
            <div>Privacy Policy</div>
            <div>Powered by Oddle.me</div>
        </div>
    </div>
</template>

<script>
import {
    computed,
    defineComponent,
    ref,
    reactive,
    nextTick,
    onMounted,
    toRaw,
    toRefs,
    watch
} from 'vue';
import { getFooterConcat } from '@/api/mall';
export default defineComponent({
    setup() {
        onMounted(() => {
            init();
        });
        let dataInfo = ref({});
        const init = async () => {
            const res = await getFooterConcat();
            console.log(res, 'xx')
            if (res) {
                dataInfo.value = res
            }
        };
        return {
            dataInfo
        };
    }
});
</script>
<style scoped lang="scss">
.app_footer {
    margin: 17px;

    .card {
        height: 266px;
        border-radius: 10px;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0);
        position: relative;
        background-color: var(--el-color-primary);

        .cover_bg {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .logo {
            position: absolute;
            z-index: 100;
            left: 30px;
            top: 20px;
            width: 75px;
            height: 35px;
        }

        .content {
            text-align: left;
            margin: 0 25px;
            margin-top: 80px;

            .concat {
                margin-bottom: 10px;
                font-size: 14px;
            }

            .follow {
                text-align: center;
                font-weight: bolder;
                font-size: 16px;
                margin: 20px auto;
            }

            .icons {
                text-align: center;
                z-index: 100;
                position: absolute;
                width: 85%;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;

                svg {
                    margin: 0 10px;
                    width: 40px;
                    height: 40px;
                }
            }
        }
    }

    .titles {
        color: rgba(102, 102, 102, 1);
        text-align: center;

        div {
            margin: 20px 0;
            font-size: 14px;
        }
    }
}
</style>
